import { createI18n } from 'vue-i18n'
import { merge } from 'lodash-es'

// 本地语言包
import zhCn from './local/zh.js'
import en from './local/en.js'

import Chinese from '@/assets/svg/chinese.svg'
import English from '@/assets/svg/english.svg'
import { useLocalStorage } from '@vueuse/core'

export class Locales {
  constructor(key, label, charWidth, locale, icon) {
    this.key = key
    this.label = label
    this.charWidth = charWidth
    this.locale = locale
    this.icon = icon
  }

  /**
   * 获取当前字符平均宽度，注意只是平均宽度，随当前字体大小调整
   */
  getCharWidth() {
    const charWidth = this.charWidth
    return charWidth[1]
  }
}

export const locales = [
  new Locales('zh-cn', '简体中文', [10, 13, 15], merge(zhCn), Chinese),
  new Locales('en', 'English', [6, 7.2, 8.5], merge(en), English),
]

export function getLocale() {
  return locales.reduce((obj, i) => {
    obj[i.key] = i.locale
    return obj
  }, {})
}

const i18n = createI18n({
  globalInjection: true,
  legacy: false,
  locale: useLocalStorage('app-lang', 'zh-cn').value,
  fallbackLocale: 'zh-cn',
  messages: getLocale(),
})

export default i18n
